剛開始看書學js的時候,遇到的第一個坑就是各種隱含轉型的方法,完全是眼花撩亂,而時至今日,重新看了之前的書,覺得應該不是我的問題,發現自己對於瑣碎的訊息真的接受度不佳(誰佳阿XD),那麼就用自己的方式來整理一下。
轉型分為強制轉型及自動轉型兩種方式,最大的差別是一個是有特定語法去做轉型這件事,是明確依循你的意願而作的;另一個是在某些特定的場景中,js自動地幫你做了這件事,不管你到底想不想要。
有關js會貼心幫忙轉型這件事,大多看到的說法是說js是一個弱型別(weakly typed)的程式語言,但幾個參考資料都不建議使用強弱型別來解釋這件事,原因是其實"強弱型別"其實並沒有一個很明確的定義,在使用上常會造成誤會與各自解讀的空間。
另一個比較有明確定義的分類是dynamic typing 與 static typing。需注意的是這和強弱型別很容易混淆,但不要輕易講強弱型別就沒事。
像js是動態型別(dynamic typing),對js而言,變數就像一個盒子,可以把各種型別的值存在裡面,也就是說,所謂的型別,指的是值,而非變數。
所以我可以先把一個字串放進盒子內,過一陣子在改放一個布林值進去同一個盒子,同一個盒子,只是內容物不同。
而相反地,靜態型別在宣告時就必須為變數指定型別,後面也無法做變更,於是這裡的型別,指的是變數。如果你把字串放進一個裝數字的變數是會報錯的。
以下用表格整理會更簡潔點:
動態型別 | 靜態型別 | |
---|---|---|
型別指的是誰 | 值 | 變數 |
何時確認型別 | run-time | compile-time |
Reference
強制轉型就不多說了,直接加上String(), Number(), Boolean()就可以做到,明白又清楚。
自動轉型的話,簡單整理幾個原則如下,然後同場加映各種資料轉成特定型別的結果:
//例子
console.log(12 + 8 + "8"); //'208'
console.log(null + "!"); //'null!'
//同場加映(以下例子沒什麼特別的,就大家都變字串這樣)
console.log(String(undefined)); //'undefined'
console.log(String(NaN)); //'NaN'
console.log(String(null)); //'null'
console.log(String(0)); //'0'
console.log(String(false)); //'false'
//例子
console.log("8" - "2" - null); //等同8-2-0=6
console.log(8 - undefined); //等同8-NaN=NaN, NaN與任何值運算皆為NaN
//同場加映
console.log(Number(undefined)); //NaN
console.log(Number(NaN)); //NaN
console.log(Number(null)); //0
console.log(Number(false)); //0
console.log(Number(true)); //1
console.log(Number("")); //0
console.log(Number("0")); //0
console.log(Number("112")); //112
console.log(Number("0s")); //NaM
//例子:input%2===0為偶數,但放在if()裡面會變false,故加上!
const isEven = function (input) {
if (!(input % 2)) {
console.log("This is an even");
} else {
console.log("This is an odd");
}
};
大概降,簡單吧~
其實搞清楚之後,發現其實也沒什麼大不了的大道理;很多時候,嚇著自己的,都是自己對未知的想像罷了,共勉之。